<template>
	<view :style="{'height':outheight,'overflow':outoverflow}">
		<view class="text-darkGray">
			<cu-custom :isBack="true" :isFull="true" bgColor="bg-white solids-bottom" isPointer="all">
				<block slot="content">
					<navigator url="../../search/search" class="search-form round">
						<text class="cuIcon-search"></text>
						<input :adjust-position="false" type="text" placeholder="请输入关键字进行搜索"
						 confirm-type="search"></input>
					</navigator>
				</block>
				<block slot="right"></block>
			</cu-custom>
		</view>
		<view class="uni-navbar uni-navbar-fixed uni-navbar-shadow" style="background-color:#FFFFFF">
			<view class="uni-flex uni-row">
				<view class="flex-item" style="flex: 1;text-align: center;" :class="{'on':Select[0]}" @tap="showMulLinkageTwoPicker">
					区域<uni-icon type="arrowdown" size="16"></uni-icon>
				</view>
				<view class="flex-item" style="flex: 1;text-align: center;" :class="{'on':Select[1]}" @tap="TaggarSelect(1)">
					所有房源<uni-icon type="arrowdown" size="16"></uni-icon>
				</view>
			</view>
		</view>
		<view class="select-box" :class="{'on':Select[0]}" :style="[{top:top + 'px'}]"></view>
		<view class="select-box" :class="{'on':Select[1]}" :style="[{top:top + 'px'}]">
			<ul class="select-ul" :style="{'max-height':(windowHeight*0.6)+'px'}">
				<li v-for="(value,index) in Type" :key="index" @tap="TaggarSelectUl(index,'Type')" :class="{'on':index == tabIndex.Type}">{{value}}</li>
			</ul>
			<view class="uni-flex">
				<view style="flex: 1;" class="select-btn on">确定</view>
			</view>
		</view>
		<view style="padding-top: 50px;">
			<view class="model-main model">
				<view class="warp30"></view>
				<view class="text-center padding-xs text-grey text-sl center" v-if="listData.length==0">
					暂无数据
				</view>
				<view class="uni-row model-item" v-for="(item,key) in listData" :key="key">
					<view class="cu-avatar-box">
						<view class="uni-flex">
							<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view style="flex: 1;">
								<view class="cu-avatar-name">吴亦凡
								<sunui-star :defaultStar="3" :disabledStar="true" class="sunui-star" :starSize="'1em'" style="display:inline-block;"/></view>
								<view class="cu-avatar-num">
									<text class="padding-right">向上地产</text><text>18512345678</text>
								</view>
							</view>
							<view class="toolbox">
								<text class="iconfont">&#xe61d;</text>
								<text class="iconfont">&#xe68f;</text>
							</view>
						</view>
					</view>
				</view>
				<view class="uni-row model-item">
					<view class="cu-avatar-box">
						<view class="uni-flex">
							<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view style="flex: 1;">
								<view class="cu-avatar-name">吴亦凡
								<sunui-star :defaultStar="3" :disabledStar="true" class="sunui-star" :starSize="'1em'" style="display:inline-block;"/></view>
								<view class="cu-avatar-num">
									<text class="padding-right">珠海市晟意网络有限公司</text><text>18512345678</text>
								</view>
							</view>
							<view class="toolbox">
								<text class="iconfont">&#xe61d;</text>
								<text class="iconfont">&#xe68f;</text>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :loadingType="loadingType" :contentText="contentText" v-if="listData.length!=0"></uni-load-more>
			</view>
		</view>
		<view class="window-bg" :class="{'on':(Select[0]||Select[1])}" @tap="RemoveBG"
		 @touchmove.stop.prevent="moveHandle"></view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import sunuiStar from '@/components/sunui-star/sunui-star.vue';
	import uniIcon from '@/components/uni-icon.vue'
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import uniLoadMore from '@/components/uni-load-more.vue'
	export default {
		components: {
			sunuiStar,
			uniIcon,
			mpvuePicker,
			mpvueCityPicker,
			uniLoadMore
		},
		data() {
			return {
				current:["on",""],
				top: 0,
				listData: [],
				TypeIds:'',
				reload: false,
				Select: [false, false],
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				mulLinkageTwoPicker: [{
						value: '110000',
						label: '斗门',
						children: [{
							value: "110101",
							label: "不限"
						}, {
							value: "110102",
							label: "连州镇"
						}, {
							value: "110103",
							label: "白蕉镇"
						}, {
							value: "110104",
							label: "井岸"
						}, {
							value: "110105",
							label: "斗门镇"
						}, {
							value: "110106",
							label: "井岸"
						}, {
							value: "110107",
							label: "白藤头"
						}, {
							value: "110108",
							label: "五山镇"
						}]
					},
					{
						value: '110000',
						label: '金湾',
						children: [{
							value: "110101",
							label: "不限"
						}, {
							value: "110102",
							label: "红旗"
						}, {
							value: "110103",
							label: "三灶"
						}, {
							value: "110104",
							label: "平沙"
						}, {
							value: "110105",
							label: "南水"
						}]
					},
					{
						value: '110000',
						label: '金湾',
						children: [{
							value: "110101",
							label: "不限"
						}, {
							value: "110102",
							label: "南屏"
						}, {
							value: "110103",
							label: "唐家湾"
						}, {
							value: "110104",
							label: "新香洲"
						}, {
							value: "110105",
							label: "吉大"
						}, {
							value: "110102",
							label: "前山"
						}, {
							value: "110103",
							label: "夏湾"
						}, {
							value: "110104",
							label: "柠溪"
						}, {
							value: "110105",
							label: "横琴"
						}, {
							value: "110102",
							label: "上冲"
						}, {
							value: "110103",
							label: "拱北"
						}, {
							value: "110104",
							label: "湾仔"
						}, {
							value: "110105",
							label: "兰埔"
						}, {
							value: "110102",
							label: "翠微"
						}, {
							value: "110103",
							label: "拱北口岸"
						}, {
							value: "110104",
							label: "老香洲"
						}, {
							value: "110105",
							label: "凤凰北"
						}]
					},
					{
						value: '110000',
						label: '横琴新区',
						children: [{
							value: "110101",
							label: "不限"
						}, {
							value: "110102",
							label: "横琴"
						}]
					},
					{
						value: '110000',
						label: '珠海周边',
						children: [{
							value: "110101",
							label: "不限"
						}, {
							value: "110102",
							label: "江门"
						}, {
							value: "110102",
							label: "中山"
						}]
					}
				],
				Type: ["所有房源", "经济房源", "个人房源"],
				tabIndex: {Type: 0},
				page: 1,
				outheight: "auto",
				outoverflow: "auto",
				pickerValueArray: [],
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				themeColor: '#ff4a4a',
				windowHeight: "",
			};
		},
		onLoad(event) {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight;
				}
			});
			this.top = this.CustomBar + 50;
			this.getList();
		},
		onPullDownRefresh() {
			this.reload = true;
			this.getList();
		},
		onReachBottom() {
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			this.getList();
		},
		methods: {
			// 二级联动选择
			showMulLinkageTwoPicker() {
				this.Select = [false, false];
				this.outheight = "auto";
				this.outoverflow = "auto";
				this.pickerValueArray = this.mulLinkageTwoPicker
				this.mode = 'multiLinkageSelector'
				this.deepLength = 2
				this.pickerValueDefault = [0, 0]
				this.$refs.mpvuePicker.show()
			},
			onConfirm(e) {
				console.info(e);
			},
			getList() {
				let data = {
					PageIndex: this.page,
					PageSize: 10,
				};
				uni.request({
					url: this.AjaxUrl + '/WebApi/GetX3HouseList',
					data: data,
					success: (res) => {
						uni.stopPullDownRefresh();
						if (res.statusCode == 200) {
							let list = JSON.parse(res.data.Extend).List;
							let PageCount = JSON.parse(res.data.Extend).PageCount;
							if (this.page > PageCount) {
								this.loadingType = 2;
								return;
							}
							this.listData = this.reload ? list : this.listData.concat(list);
							this.reload = false;
							this.page++;
							this.loadingType = 0;
							console.info(this.listData);
						}
					},
					fail: (e) => {
						console.info(e);
					}
				})
			},
			TaggarSelect(item) {
				if (this.Select[item]) {
					this.Select = [false, false];
					this.outheight = "auto";
					this.outoverflow = "auto";
				} else {
					this.Select = [false, false];
					this.Select[item] = !this.Select[item];
					this.outheight = this.windowHeight + "px";
					this.outoverflow = "hidden";
				}
			},
			TaggarSelectUl: function(index, type) {
				this.tabIndex[type] = index;
			},
			RemoveBG: function() {
				this.Select = [false, false];
				this.outheight = "auto";
				this.outoverflow = "auto";
			},
			moveHandle: function() {
				console.info("滑不了了");
			},
			RegetList(){
				this.listData = [];
				this.page = 1;
				this.getList();
				this.RemoveBG();
			},
			getData(ary){
				let array = [];
				ary.map(o => {
					array[o.key] = this.getCheck(o.list);
				});
				return array;
			}
		}
	}
</script>

<style lang="less">
	.cu-bar .search-form {
		margin: 0;
		text-align: left;
		background: #e6e6e6;
		color: #868686;
	}
	.model-main>.uni-row.model-item{
    	padding: 30upx;
    	overflow: hidden;
    	position: relative;
    	&:after{
    		content: "";
    		display: block;
    		height: 2upx;
    		width: 100%;
    		background: #CCCCCC;
    		left: 30upx;
    		bottom: 0;
    		position: absolute;
    	}
    	.cu-avatar-box{
    		.cu-avatar-name{
    			font-size: 32upx;
    			color: #333333;
    			line-height: 48upx;
    		}
    		.cu-avatar-num{
				line-height: 1;
				text{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					max-width: 50%;
					display: inline-block;
					font-size: 24upx;
					color: #999999;
					line-height: 48upx;
					&.padding-right{
						padding-right: 10upx;
						box-sizing: border-box;
					}
				}
    		}
    		.cu-avatar-main{
    			line-height: 1.5;
    			overflow: hidden;
    			text-overflow: ellipsis;
    			display: -webkit-box;
    			-webkit-line-clamp: 3;
    			-webkit-box-orient: vertical;
    		}
    	}
		.toolbox{
			.iconfont{
				font-size: 50upx;
				display: inline-block;
				color: #fff;
				background: var(--red);
				padding: 10upx;
				line-height: 1;
				margin: 14upx 20upx;
				border-radius: 50%;
			}
		}
    }
	.select-box {
		width: 100%;
		padding: 30upx 0 0;
		background: #fff;
		text-align: center;
		position: fixed;
		top: 130px;
		z-index: 0;
		opacity: 0;
	}
	
	.select-box.on {
		z-index: 11;
		opacity: 1;
	}
	
	.select-box .uni-input-div {
		flex: 1;
		padding: 10px;
	}
	
	.select-box .zhi {
		line-height: 96upx;
	}
	
	.select-box .uni-input-div .uni-input {
		background: #f2f2f2;
		padding: 0;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		border-radius: 50upx;
	}
	
	.select-input {
		border-top: 2upx solid #ddd;
	}
	
	.select-btn {
		padding: 10upx 0;
		font-size: 28upx;    
		border-radius: 50px;
		margin: 10px;
		border: 2upx #ff4a4a solid;
		color: #ff4a4a;
	}
	
	.select-btn.on {
		color: #fff;
		background: #ff4a4a;
	}
	
	.select-ul {
		padding: 0 20upx;
		margin-bottom: 10upx;
		overflow: auto;
	}
	
	.select-ul li {
		display: block;
		padding: 24upx 20upx;
		border-bottom: 2upx solid #fff;
		text-align: left;
		font-size: 28upx;
	}
	
	.select-ul li.on {
		color: #e7736d;
		border-bottom-color: #e7736d;
		position: relative;
	}
	
	.select-ul li.on:after {
		content: "\e62c";
		font-family: "iconfont";
		color: #e7736d;
		position: absolute;
		right: 50upx;
	}
	
	.select-item {
		font-size: 24upx;
		text-align: left;
		margin-bottom: 20upx;
	
		.select-item-title {
			margin-bottom: 10upx;
			line-height: 2;
			color: #666666;
			font-size: 28upx;
			display: block;
		}
	
		.select-item-list {
			padding: 0;
	
			.select-item-list-item {
				width: 25%;
				text-align: center;
				float: left;
				padding: 0;
	
				.select-item-list-item-btn {
					margin: 0 5% 10upx;
					border: 2upx solid #f6f6f6;
					background: #f6f6f6;
					color: #666666;
					box-sizing: border-box;
					border-radius: 6upx;
					width: 90%;
					text-align: center;
					font-size: 24upx;
					line-height: 2.5;
					display: block;
					padding: 0;
	
					&.on {
						background: #fff;
						border-color: #ff5f15;
						color: #ff5f15;
					}
				}
	
				&.w50 {
					width: 50%;
	
					.select-item-list-item-btn {
						margin: 0 2.5% 10upx;
						width: 95%;
					}
				}
			}
		}
	}
	.window-bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
		display: none;
		display: none;
		&.on {
			display: block;
		}
	}
	.uni-navbar {
		display: block;
		position: relative;
		width: 100%;
		background-color: #FFFFFF;
		overflow: hidden;
	}
	
	.uni-navbar-shadow {
		-webkit-box-shadow: 0 1px 6px #ccc;
		box-shadow: 0 1px 6px #ccc;
	}
	.uni-navbar.uni-navbar-fixed {
		position: fixed;
		z-index: 998;
	}
	.uni-navbar view .flex-item {
		height: 100upx;
		line-height: 100upx;
		font-size: 28upx;
	}
	
	.uni-navbar view .flex-item.on {
		color: #e7736d;
	}
	
	.uni-navbar view .flex-item .uni-icon {
		margin-left: 10upx;
	}
</style>
